<template>
  <div>
    <el-dialog
      top="5vh"
      :title="title"
      :visible.sync="visible"
      :width="width + 'px'"
      :before-close="onClose"
      :close-on-click-modal="false"
    >
      <div class="container" :style="{height:height+'px'}">
        <slot name="content"></slot>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onClose">取 消</el-button>
        <el-button type="primary" @click="onConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    props: {
      title: {
        type: String,
        default: "标题",
      },
      visible: {
        type: Boolean,
        default: false,
      },
      width: {
        type: Number,
        default: 600,
      },
      height: {
        type: Number,
        default: 250,
      },
    },
    data() {
      return {};
    },
    methods: {
      onClose() {
        this.$emit("onClose");
      },
      onConfirm() {
        this.$emit("onConfirm");
      },
    },
  };
</script>
<style lang="scss" scoped>
  .container{
    overflow-x: initial;
    overflow-y: auto;
  }
  .el-dialog__wrapper {
    ::v-deep .el-dialog {
      border-top-left-radius: 7px !important;
      border-top-right-radius: 7px !important;
      .el-dialog__header {
        border-top-left-radius: 7px !important;
        border-top-right-radius: 7px !important;
        background-color: #1890ff;
        .el-dialog__title {
          color: #fff;
          font-size: 15px;
          font-weight: 700;
        }
        .el-dialog__close {
          color: #fff;
        }
      }
      .el-dialog__body {
        padding: 10px 10px !important;
      }
      .el-dialog__footer {
        border-top: 1px solid #e8eaec !important;
        padding: 10px !important;
      }
    }
  }
</style>
